
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商品中心</title>
    <link rel="icon" href="img/weblogo.png" >
    <link rel="stylesheet" type="text/css" href="bootstrap-5.1.3-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="css/ycc.css"/>
    <script type="text/javascript" src="js/jquery-3.6.0-min.js"></script>
    <script type="text/javascript" src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/shop_center.js"></script>
</head>
<body>
    <!-- 首部导航栏 -->
    <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
        <div class="container-fluid text-white">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                <h5 class=""><i class="bi bi-cart4"></i>闲优购</h5>
                <ul class="navbar-nav me-lg-2 mb-0 mb-lg-1">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="index.jsp"><i class="bi bi-house"></i>首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/shop_center"><i class="bi bi-shop"></i>商品中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="user_center.jsp"><i class="bi bi-cart-check"></i>查询订单</a>
                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="commodity_publish.jsp"><i class="bi bi-shift"></i>发布商品</a>
                    </li>

                </ul>

                <ul class="navbar-nav" style="margin-left: auto">

                    <li class="nav-item">
                        <a class="nav-link" href="user_center.jsp">
                            <i class="bi bi-clock-history"></i>
                            查询购买记录
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="user_center.jsp">
                            <i class="bi bi-person-fill"></i>
                            用户中心
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/loginOut">
                            <i class="bi bi-backspace-reverse"></i>
                            退出登陆
                        </a>
                    </li>

                </ul>

                当前用户: <em id="username">${sessionScope.userInfo.name}</em>

            </div>
        </div>
    </nav>

    <!-- 商品分类列表 -->
    <div class="container text-center card-commodity-type mt-2">

        <button type="button" class="btn btn-dark position-relative btn-commodity-type" href="/shop_center?ctype=-1">
            所有商品
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
            ${sessionScope.totalCommodity}
          </span>
        </button>

        <c:forEach items="${sessionScope.commodityTypes}" var="ct">
            <button type="button" class="btn-commodity-type btn btn-dark position-relative" href="/shop_center?ctype=${ct.id}">
                ${ct.info}
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                ${ct.count}
          </span>
            </button>
        </c:forEach>

    </div>

    <!-- 面包屑导航-->
    <div class="container mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <span>当前位置:&nbsp;&nbsp;</span>
                <li class="breadcrumb-item"><a class="fst-italic text-dark" style="text-decoration: none">商品中心</a></li>
                <li class="breadcrumb-item active fst-italic" aria-current="page">${sessionScope.nowTypeName eq "-1" ? "所有商品" : sessionScope.nowTypeName}</li>
                <!-- 头部分页按钮 -->
                <ul class="pagination float-end position-relative" style="margin-left: auto;">
                    <li class="page-item">
                        <a class="page-link btn-sm" href="/shop?page=last">
                            <i class="bi bi-arrow-left"></i>
                        </a>
                    </li>
                    <span class="page-now">${sessionScope.pageInfo.pageNow + 1}</span>/<span class="page-end">${sessionScope.pageInfo.totalPage + 1}</span>
                    <li class="page-item">
                        <a class="page-link btn-sm" href="/shop?page=next">
                            <i class="bi bi-arrow-right"></i>
                        </a>

                    </li>
                </ul>
<%--                </nav>--%>
            </ol>
        </nav>
    </div>
    <!-- 商品列表 -->
    <div class="container">
        <div class="row card-commodity-row">
            <c:forEach items="${sessionScope.commodityInfo}" var="cd">
                <div class="col-3 mb-5">
                    <div class="card-commodity" data-uid="${cd.uid}" data-cid="${cd.id}" data-nowuid="${sessionScope.userInfo.id}">
                        <img src="${cd.img}" class="card-img-top">
                        <div class="card-body">

                            <h5 class="card-title text-center">￥${cd.price}</h5>
                            <h6>商品名称: <span>${cd.name}</span></h6>
                            <h6 class="card-text" href="#">商品类型: ${cd.typeName}</h6>
                            <a class="card-text" href="#">商品描述: ${cd.info}</a>
                            <p>商家: <a href="#">${cd.userName}</a></p>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>

    </div>

    <!-- 尾部分页按钮 -->
    <nav aria-label="Page navigation example" class="card-shop-page-end">
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a class="page-link" href="/shop?page=last">上一页</a>
            </li>
            <c:forEach begin="${sessionScope.pageInfo.pageNow - 2 >= 0 ? sessionScope.pageInfo.pageNow : 0}" end="${sessionScope.pageInfo.pageNow + 5}" var="x">
                <c:if test="${x <= sessionScope.pageInfo.totalPage && x >= 0}">
                    <li class="page-item">
                        <a class="page_a page-link d-block ${x == sessionScope.pageInfo.pageNow ? "bg-info":""}" href="/shop?page=${x+1}">${x+1}</a>
                    </li>
                </c:if>
            </c:forEach>
            <li class="page-item">
                <a class="page-link" href="/shop?page=next">下一页</a>
            </li>
        </ul>
    </nav>

    <!-- Button trigger modal -->

    <button id="bt-buy" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop" hidden>
        modal组件
    </button>
    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger" id="staticBackdropLabel">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        温馨提示
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    是否确认购买？
                </div>
                <div class="modal-footer">
                    <button id="btn-buy-cancel" type="button" class="btn btn-danger" data-bs-dismiss="modal">我再想想</button>
                    <button id="btn-buy-ok" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-buy-ok">确认购买</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modal-buy-ok" tabindex="-1" aria-labelledby="modal-h-buy-ok" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger" id="modal-h-buy-ok">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        温馨提示
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h5 class="display-5 text-success text-center">
                        购买成功!
                        <i class="bi bi-check-circle"></i>
                    </h5>
                </div>
            </div>
        </div>
    </div>

    <!-- 当用户点击到自己的商品时弹出的错误模态框-->
    <button id="btn-buy-no" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-buy-no" hidden></button>
    <div class="modal fade" id="modal-buy-no" tabindex="-1" aria-labelledby="modal-h-buy-no" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger" id="modal-h-buy-no">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        温馨提示
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h5 class="text-warning text-center">
                        <i class="bi bi-x-circle"></i>
                        抱歉，您无法购买自己的商品!
                    </h5>
                </div>
            </div>
        </div>
    </div>
    <div style="position: fixed; left: 0; bottom: 0; margin-inline: auto; width: 100%; z-index:-1" class="text-center">
        <p>CopyRight © 2021-2022 uni科技有限公司 </p>
    </div>
</body>

</html>